<template>
    <div>
        <h3>会员列表</h3>
        <input type="button" value="增加增加" class="btn btn-priamry" @click="add">
        <hr />
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>等级名称</td>
                </tr>
                <tr v-for="item in data" :key="item.ID">
                    <td>{{item.Id}}</td>
                    <td>{{ item.LevelName }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
//生命周期钩子函数
import axios from 'axios';
import { onMounted,reactive,ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

//声明变量存储后端返回的数据
let data:any=ref([]);


//生命周期钩子函数（文档就绪函数）
onMounted(() => {
    getList();
});

//点击增加时跳转到增加页面
const add = () => {
    router.push("/memberAdd");
    //location.href="Member/MemeberAdd"
}
//显示会员等级列表(显示列表需要多少操作)
const getList = () => {
    axios({
        url: 'https://localhost:7035/api/ZMember',
        method: 'get',

    })
    .then((res)=>{
        console.log(res);
        data.value=res.data;
    })
    .catch((err)=>{
        console.log(err);
    });
}
</script>

<style scoped></style>